<template>
    <div class="mgm-cb">
        <div class="top-section relative">
        	<h2>{{$t('mgm.h2_1')}} <span>{{ nickName }}</span> {{$t('mgm.h2_2')}}</h2>
        	<h5>{{$t('mgm.h5')}}</h5>
        	<div class="top-input">
			  <el-input :placeholder="$t('mgm.placeholder')" v-model="email" class="input-with-select">
			    <div class="mgm-button" slot="append" @click="doRegist">{{$t('regist.t6')}}</div>
			  </el-input>
			</div>
        	<div class="mgm-bag"></div>
        </div>
        <div class="content-banner">
        	<div class="title">{{$t('mgm.t1')}}</div>
        	<div class="txt-steps">
				<p>{{$t('mgm.t2')}}</p>
				<p>{{$t('mgm.t3')}}</p>
				<p>{{$t('product.detail.paid_txt4')}}</p>
			</div>
        	<cash-back-steps></cash-back-steps>
        	<div class="clearfix btns">
        		<router-link to="/" class="float-left aip-white-btn">{{$t('mgm.btn1')}}</router-link>
        		<router-link to="/member/regist" class="float-right aip-green-btn">{{$t('regist.t6')}}</router-link>
        	</div>
        	<div class="title" style="padding: 30px 0 15px 0;">{{$t('mgm.t4')}}</div>
        	<div class="mgm-carousel">
				<el-carousel :interval="5000" arrow="always" height="200">
				    <el-carousel-item v-for="item in 4" :key="item">
				    	<div>
				    		<img src="../../../assets/mgm-p.png">
							<h4>Sarah Richardson</h4>
							<p>Top 100 Amazon seller in the US</p>
							<p>{{$t('mgm.t5')}}</p>
							<p>{{$t('mgm.t6')}}</p>
							<p>{{$t('mgm.t7')}}</p>
				    	</div>
				    </el-carousel-item>
			  </el-carousel>
			  <div class="clearfix btns">
	        		<router-link to="/" class="float-left aip-white-btn">{{$t('mgm.btn1')}}</router-link>
	        		<router-link to="/member/regist" class="float-right aip-green-btn">{{$t('regist.t6')}}</router-link>
	        	</div>
        	</div>
        	
        </div>
    </div>
</template>

<script>
	import CashBackSteps from '@/views/c/product/component/CashBackSteps'
	import {validateEmail} from '@/utils/validate'
    import { getNickName } from '@/api/login'
    import Cookies from 'js-cookie'
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    export default {
    	components: { CashBackSteps },
        data() {
            return {
                nickName: '',
                email: '',
                mgmCode: getQueryString('code') || ''
            }
        },
        methods: {
           doRegist() {
           	if (!this.email) {
           		this.$message({
		          message: 'please enter your email',
		          type: 'warning'
		        });
           	} else if (!validateEmail(this.email)) {
           		this.$message({
		          message: 'please enter correct email',
		          type: 'warning'
		        });
           	} else {
           		this.$router.push({path: '/member/regist', query: {defaultEmail: this.email}})
           	}
           }
        },
        
        created() {
            if (this.mgmCode) {
                Cookies.set('mgmucode', this.mgmCode, { expires: 30 })
            }
            getNickName({mgmCookie: this.mgmCode}).then(response => {
              this.nickName = response.data
            }).catch(e => {
              this.$message.error('sending error');
            })
            // alert(9)
            // $('.dialog-coupon li').click(() => {
            // 	$(this).addClass('active');
            // })
        }
    }
</script>

<style  scoped>
    p {
        margin: 0;
    }
    li {
        list-style: none;
    }
    .mgm-cb {
       
    }
    .top-section {
    	width: 100%;
    	height: 462px;
    	background: #3E3E58;
    	padding: 95px 120px;
    	color: #ffffff;
    }
    .top-section h2 {
    	font-size: 42px;
    	font-weight: normal;
    	margin: 0 0 20px 0;
    }
    .top-section h2 span {
    	color: #FFB73E;
    }
    .top-section h5 {
    	font-weight: normal;
    	font-size: 25px;
    }
    .top-section .mgm-bag {
    	position: absolute;
    	right: 54px;
    	bottom: 47px;
    	width: 267px;
    	height: 197px;
    	background: url("../../../assets/icons/mgm-bag.png") no-repeat center;
        background-size: contain;
    }
    .top-input {
    	width: 425px;
    	margin-top: 75px;
    	-webkit-box-shadow: 0 0 8px 0 rgba(177,177,177,0.5);
    	box-shadow: 0 0 8px 0 rgba(177,177,177,0.5);
    }
    .top-input .mgm-button {
    	background: #3DBDB6;
    	width: 120px;
    	color: #ffffff;
    	height: 40px;
    	line-height: 40px;
    	text-align: center;
    	border-top-right-radius: 4px;
    	border-bottom-right-radius: 4px;
    	cursor: pointer;
    }
    .content-banner {
	background: #FAFBFC;
	padding: 50px 0;
	text-align: center;
}
	.content-banner .title {
		font-size: 32px;
		color: #333333;
		margin-bottom: 35px;
	}
	.content-banner .el-steps {
		width: 800px;
		margin: 80px auto;
	}
	.txt-steps p {
		font-size: 18px;
		line-height: 34px;
		color: #333333;
	}
	.txt-steps p:nth-of-type(3) {
		font-size: 18px;
		color: #72808E;
		margin-top: 10px;
	}
	.content-banner .btns {
		width: 400px;
		margin: 0 auto 50px auto;
	}
	.content-banner .btns a {
		width: 175px;
		height: 52px;
		line-height: 52px;
		border-radius: 4px;
		font-size: 17px;
	}
	
	  .mgm-carousel {
	  	width: 775px;
	  	margin: 0 auto;
	  	text-align: center;
	  	font-size: 16px;
	  }
	  .mgm-carousel img {
	  	width: 100px;
	  	height: 100px;
	  }
	  .mgm-carousel h4 {
	  	padding: 16px 0 7px 0;
	  	color: #333333;
	  }
	  .mgm-carousel p {
	  	color: #72808E;
	  	line-height: 22px;
	  }
	  .mgm-carousel p:nth-of-type(1) {
	  	margin-bottom: 20px;
	  }
</style>
<style type="text/css">
    .mgm-cb .el-input-group__append {
    	border: none;
    	padding: 0;
    }
    .mgm-cb .el-input__inner {
    	background: rgba(0,0,0,0.2);
    	border: none;
    	color: #ffffff;
    }
</style>
